<template>
  <div class="about">
    <h1>This is an about page</h1>

    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
    <h2>wife: {{ wife }}</h2>
    <hr />
    <button @click="update">更新</button>
  </div>
</template>

<script>
/*
reactive:
    作用: 定义多个数据的响应式
    const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
    响应式转换是“深层的”：会影响对象内部所有嵌套的属性
    内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    /*
    定义响应式数据对象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      }
    })
    // console.log(state, state.wife)
    const refData = toRefs(state)

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

    return {
      // state,
      ...refData,
      update
    }
  }
}
</script>
